<template>
	<image src="../../static/image/12.png" mode="widthFix" class="bg"></image>
	<view class="top " :style="{
		paddingTop:menu.top+'px'
	}">
		<view class="header t-flex " :style="{
			top:menu.top+'px',
			height:menu.height+'px'
		}">
			<text class="iconfont icon-xiangyou1 reverse back" @click="routeFn.back()"></text>
			<view class="tab f32 c9 t-flex bold">
				<view class="item" @click="change(0)" :class="{'c3':current == 0}">项目订单</view>
				<view class="" @click="change(1)" :class="{'c3':current == 1}">套餐订单</view>
			</view>
		</view>
		<view class="tabs pt20">
			<u-tabs :list="tab.list" :is-scroll="false" :current="tab.current" @change="tab.change"
			active-color="#E40417"
			barWidth="56"
			barHeight="6"
			height="100"
			inactiveColor="#666"
			bg-color="transparent"
			></u-tabs>
		</view>
	</view>
	
	<view class="container">
		<template v-for="item in data" :key="item.id">
			<classOrder :data="item" @actions="actions"></classOrder>
<!-- 			<workerOrder></workerOrder> -->
		</template>
		<empty msg="暂无相关订单" v-if="!data.length"></empty>
	</view>
	
	
	<view class="bpad"></view>
	
	
	
	<u-popup mode="center" v-model="qrcode.show" borderRadius="20">
		<view class="pop" v-show="qrcode.show">
			<u-qrcode :value="qrcode.value" canvasId="qrcode1" size="300" @complete="qrcodecomplete"></u-qrcode>
		</view>
	</u-popup>
	
</template>

<script setup lang="ts">
	import { onLoad,onPullDownRefresh,onReachBottom,onUnload } from "@dcloudio/uni-app"
	import { reactive, ref } from "vue";
	import { getLastOrder, routeFn, showToast, usePaging } from "../../lib/ts/util";
	import { cancleOrder, payOrder } from "../../api";
	import { useStore } from "../../store";
	
	
	const store = useStore()
	const {
		data,
		reload,
		getMore
	} = usePaging('/api/order_info/GoodsOrderList')
	
	
	onLoad(()=>{
		reloadData()
	})
	onPullDownRefresh(()=>{
		reloadData()
	})
	onReachBottom(()=>{
		getMore({
			status:tab.list[tab.current].id,
			type:current.value
		})
	})
	onUnload(()=>{
		uni.$off('updateOrderList')
	})
	uni.$on('updateOrderList',()=>{
		reloadData()
	})
	
	
	const reloadData = ()=>{
		reload({
			status:tab.list[tab.current].id,
			type:current.value
		})
	}
	
	
	let menu = uni.getMenuButtonBoundingClientRect()
	
	
	let current = ref(0)
	const change = (e)=>{
		current.value = e
		reloadData()
	}
	
	
	let tab = reactive({
		list:[{name:'全部',id:''},{name:'待付款',id:0},{name:'待服务',id:1},{name:'待评价',id:2}],
		current:0,
		change(e:number){
			tab.current = e
			reloadData()
		}
	})
	
	//核销码
	let qrcode = reactive({
		show:false,
		value:'none',
		open(e){
			qrcode.value = e
			qrcode.show = true
		}
	})
	
	const qrcodecomplete = (e)=>{
		console.log(e,'?')
	}
	
	const actions = async (e)=>{
		let {type,data:target} = e
		
		switch(type){
			case 1: //查看助力
				uni.navigateTo({
					url:'/pages/shareOrder/shareOrder?id='+target.id
				})
			break;
			case 2: //取消订单
				uni.showModal({
					title:'提示',
					content:'是否确认要取消订单？',
					async success(e) {
						if(e.confirm){
							let res = await cancleOrder(target.id)
							showToast(res.msg)
							reloadData()
						}
					}
				})
			break;
			case 3: //立即支付
				 let paydata = await payOrder(target.id)
				 store.pay(paydata,'wechat').then(()=>{
					 showToast('支付成功')
					 reloadData()
				 })
			break;
			case 4: //核销码
				let lastorder =  getLastOrder(target.orderdetail)
				if(lastorder.length){
					qrcode.open(`jzbl?id=${lastorder[0].id}&ht=${!lastorder[0].ht_info?0:1}`)
				}else{
					uni.showModal({
						title:'提示',
						content:'还未预约时间。',
						confirmText:'去预约',
						success(e) {
							if(e.confirm){
								uni.navigateTo({
									url:`/pages/order/booking?id=${target.id}`
								})
							}
						}
					})
				}
			break;
			case 5:
				uni.navigateTo({
					url:'/pages/order/comment?id='+target.id
				})
			break;
		}
	}
	
	

</script>

<style scoped lang="scss">
	.container{
		position: relative;
		z-index: 2;
	}
	.bg{
		position: absolute;
		width: 100%;
		background-color: #fff;
	}
	.top{
		position: relative;
		z-index: 2;
		background-image: linear-gradient(#FFF3F2,#fff);
		
	}
	.header{
		padding-left: 24rpx;
		.back{
			display: inline-block;
			margin-right: 100rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
		}
		.tab{
			.item{
				margin-right: 60rpx;
			}
		}
	}
	
	.pop{
		padding: 50rpx;
	}
	
	
	
	
</style>
